import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

Rectangle {
    id: rectangle1
    width: 200
    height: 200
    color: "#00000000"

    ScrollView {
        id: scrollView
        width: parent.width
        height: parent.height
        anchors.left: parent.left
        focusPolicy: Qt.WheelFocus
        contentWidth: parent.width
        contentHeight: 500

        state: "change1"
        states: [
            State {
                name: "change1"
                PropertyChanges {
                    target: scrollView
                    anchors.leftMargin: 0
                }
            },
            State {
                name: "change2"
                PropertyChanges {
                    target: scrollView
                    anchors.leftMargin: -width
                }
            }
        ]


        NumberAnimation {
            id:scrollView_hide
            target: scrollView
            property: "anchors.leftMargin"
            to:-width
            duration: 500
            easing.type: Easing.InOutQuad
        }

        NumberAnimation {
            id:scrollView_show
            target: scrollView
            property: "anchors.leftMargin"
            to:0
            duration: 500
            easing.type: Easing.InOutQuad
        }

        //按键1

        EXC_Control_ButtonSingle {
            id: eXC_Control_ButtonSingle1
        }

        EXC_Control_ButtonSingle {
            id: eXC_Control_ButtonSingle2
        }

        EXC_Control_ButtonSingle {
            id: eXC_Control_ButtonSingle3
            x: 3
            y: -6
        }

        EXC_Control_ButtonSingle {
            id: eXC_Control_ButtonSingle4
            x: 4
            y: 8
        }




    }
/*
    ScrollView {
        id: scrollView1
        width: parent.width
        height: parent.height
        contentHeight: 500
        contentWidth: parent.width
        anchors.left: parent.right
        Button {
            id: button
            width: parent.width
            text: qsTr("Button")
        }
        Rectangle{
            id:rectangle_test
        }
    }
*/

    ScrollView {
        id: scrollView1
        width: parent.width
        height: 200
        clip: true
        contentHeight: 500
        contentWidth: width
        anchors.topMargin: parent.width*0.4
        anchors.top: parent.top
        anchors.left: parent.right

        Button {
            id: excbox_itemDelegate1
            text: qsTr("Item Delegate")
            anchors.left: parent.left
            height: width*0.3
            anchors.horizontalCenter: parent.horizontalCenter
//            LinearGradient
//            {
//                id:excbox_itemDelegate1_lg
//                anchors.fill: parent
//                start: Qt.point(0, 0);
//                end: Qt.point(width, 0);
//                gradient: Gradient {
//                    GradientStop { position: 0.0; color: (parent.hovered ? (parent.pressed ? "grey" : "green") : "lightsteelblue")}
//                    GradientStop { position: 0.5; color: (parent.hovered ? (parent.pressed ? "grey" : "green") : "ghostwhite")   }
//                    GradientStop { position: 1.0; color: (parent.hovered ? (parent.pressed ? "grey" : "green") : "lightsteelblue")}
//                }
//            }
            NumberAnimation {
                id:scrollView1_show
                target: scrollView1
                property: "anchors.leftMargin"
                to:-width
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                id:scrollView1_hide
                target: scrollView1
                property: "anchors.leftMargin"
                to:0
                duration: 500
                easing.type: Easing.InOutQuad
            }
            background: Rectangle{
                anchors.fill: parent
                radius: parent.width/20
                gradient: Gradient {
                    GradientStop {
                        position: 0
                        color: "#000000"
                    }

                    GradientStop {
                        position: 0.5
                        color: "#d2d1d1"
                    }

                    GradientStop {
                        position: 1
                        color: "#000000"
                    }

                }
            }

        }
    }

    Connections {
        target: eXC_Control_ButtonSingle1
        onClicked:
        {
            if(eXC_Control_ButtonSingle1.checked){
                scrollView_hide.start()
                scrollView1_show.start()
            }
            else{
                scrollView_show.start()
                scrollView1_hide.start()
            }
        }
    }

    Connections {
        target: eXC_Control_ButtonSingle2
        onClicked:
        {
            if(eXC_Control_ButtonSingle2.checked)
                scrollView_hide.start()
            else
                scrollView_show.start()
        }
    }

    Connections {
        target: eXC_Control_ButtonSingle3
        onClicked:
        {
            if(eXC_Control_ButtonSingle3.checked)
                scrollView_hide.start()
            else
                scrollView_show.start()
        }
    }
    Connections {
        target: eXC_Control_ButtonSingle4
        onClicked:
        {
            if(eXC_Control_ButtonSingle4.checked)
                scrollView_hide.start()
            else
                scrollView_show.start()
        }
    }

    Connections {
        target: scrollView_hide
        onStopped:
        {
            scrollView.state="change2"
        }
    }
    Connections {
        target: scrollView_show
        onStopped:
        {
            scrollView.state="change1"
        }
    }

}

